<template>
  <div class="closeAccount">
    <u-nav-bar :title="'注销账户'" />
    <div class="closeAccount__ct">
      <img src="@/assets/image/mine/closeAccount/question.png" />
      <div class="title first__title">
        您正在申请注销
        <span>{{ phone }}</span>
        所绑定的司机账号
      </div>
      <div class="item">
        <div class="title">您提交的注销申请生效前，我们团队将进行以下验证以确保你的账号、财产安全</div>
        <div class="text">1. 账号处于安全状态</div>
        <div class="text">2. 钱包中无余额、无已提现但未到账金额</div>
        <div class="text">3. 账户内无未完成的运单、无已完成但未支付的运单/服务</div>
      </div>
      <div class="item">
        <div class="title">注意，注销账号后以下信息将被清空且无法找回</div>
        <div class="text">1. 身份信息</div>
        <div class="text">2. 账户信息</div>
        <div class="text">3. 会员及权益信息</div>
        <div class="text">4. 交易记录</div>
        <div class="text memo">
          请确保所有交易已完结且无纠纷，账户删除后的历史交易可能产生的资金退回等权益将视作自动放弃
        </div>
      </div>
      <van-button @click="onSubmit">申请注销</van-button>
      <div class="info">
        点击【申请注销】即代表你已经同意
        <span>《账户注销须知》</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import uNavBar from '@/components/NavBar.vue'
import store from '@/store/index'
import { useRouter } from 'vue-router'
export default defineComponent({
  name: 'CloseAccount',
  components: {
    'u-nav-bar': uNavBar
  },
  // 只注重主流程的执行，不同业务的函数拆分出去，业务逻辑清晰明了
  setup() {
    const userInfo = store.getters['user/getUserInfo']
    const phone = userInfo?.consignerContact?.contactPhone?.replace(/([\s\S]{3})([\s\S]{4})/, '$1****') ?? ''
    /** 事件专区 */
    const router = useRouter()
    const onSubmit = async (): Promise<void> => {
      router.push({
        name: 'CloseAccountNews'
      })
    }

    return {
      onSubmit,
      phone
    }
  }
})
</script>
<style lang="scss" scoped>
@import '@/style/variables.scss';
@import '@/style/mixins.scss';
.closeAccount {
  @include flex-cloumn-width-height-100;
  background-color: $background-color-base;
  &__ct {
    @include flex-scroll-content-pd(24px 12px 0 12px);
    img {
      width: 60px;
      height: 60px;
      display: block;
      margin: 30px auto 24px auto;
    }
    .title {
      font-size: 14px;
      font-weight: 500;
      color: #101736;
      line-height: 20px;
      text-align: center;
    }
    .first__title {
      margin-bottom: 50px;
    }
    .item {
      width: 100%;
      background: #f6f7fa;
      border-radius: 8px;
      box-sizing: border-box;
      padding: 18px 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-bottom: 20px;
      .title {
        text-align: left;
        margin-bottom: 15px;
      }
      .text {
        font-size: 12px;
        font-weight: 400;
        color: #575c72;
        line-height: 22px;
      }
      .memo {
        margin-top: 25px;
      }
    }
    button {
      width: 325px;
      height: 48px;
      background: linear-gradient(125deg, #74cdff 0%, #409eff 100%);
      box-shadow: 0px 3px 12px 0px rgba(64, 158, 255, 0.4);
      border-radius: 24px;
      color: white;
      font-size: 16px;
      margin: 20px auto 12px auto;
      display: block;
      border: none;
    }
    .info {
      font-size: 12px;
      font-weight: 400;
      color: #575c72;
      text-align: center;
      span {
        color: #409eff;
      }
    }
  }
}
</style>
